<template>
    <div class="demo-collapse">
    <el-collapse @change="handleChange">
      <el-collapse-item :title="item.issue" :name="i" v-for="(item,i) in sqaData" :key="i">
        <div>
        {{ item.answer }}
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import { getSqa } from "./faq.service";
import { ref, onMounted} from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const router = useRouter()
const sqaData = ref([])

const handleChange = (val: string[]) => {
  console.log(val)
}

const getSqaData = () => {
  getSqa().then((res) => {
    if(res.status === 0){
        sqaData.value = res.data
    }
    console.log(res, "sqa");
  });
};
getSqaData();

onMounted(()=>{
   
})
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 768px) {
  .demo-collapse{
    padding: 20px !important;
    :deep(.el-collapse-item__content){
      font-size: 14px !important;
    }
  }
}
.demo-collapse{
    margin: 0 auto;
    max-width: 1440px;
    padding: 20px 50px;
  :deep(.el-collapse-item__header){
    height: auto;
    padding: 15px 0;
    line-height: 22px;
    font-size: 16px;
    font-weight: bold;
  }
  :deep(.el-collapse-item__content){
    font-size: 16px;
  }
}
</style>